<template>
    <ul class="miao-footer">
        <router-link v-for="(item, key) in skip"
                     :key="key" :class="{active:highlight === item.page.params.highlight}"
                     :to="item.page" tag="li">
          <i :class="item.icon" ref="skipGlobule"></i>
          <p>{{item.text}}</p>
        </router-link>
    </ul>
</template>
<script>
    export default {
        name: "miaoFooter",
        data(){
            return{
                skip:[
                    {
                        icon:'iconfont icon-shop2',
                        text:"首页",
                        page:{name:'home', params:{highlight:'home'}}
                     },
                    {
                        id:1,
                        icon:'iconfont icon-cart-copy',
                        text:"购物车",
                        page:{name:'cart', params:{highlight:'cart'}}
                    },
                    {
                        icon:'iconfont icon-icon128 bold',
                        text:"订单",
                        page:{name:'orderAll', params:{highlight:'orderAll'}}
                    },
                    {
                        icon:'iconfont icon-women bold',
                        text:"我",
                        page:{name:'center', params:{highlight:'center'}}
                    }
                ],
                quantity:null,
            }
        },
        mounted(){
          this.$bus.$emit('skipglobule', this.$refs.skipGlobule[1]);

        },

        props:{
            highlight:{
                default:'home'
            },
          shoppingCart:Array
        }
    }
</script>

<style>
    .miao-footer{
        width: 100%;
        list-style: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: 0;
        z-index: 999;
        border-top:2px solid #e4e4e4;
    }
    .miao-footer>li{
        background: #fff;
        display: inline-block;
        vertical-align: middle;
        width: 25%;
        height: 100px;
        font-size: 0;
        color: #888888;
        text-align: center;
        box-sizing: border-box;
        padding: 10px 0;
    }
    .miao-footer>li>span{
      display: inline-block;
      position: absolute;
      left:290px;
      bottom: 65px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: RGB(254,60,46);
      color: white;
      text-align: center;
      line-height: 35px;
      font-size: 12px;
    }
    .miao-footer>li>i {
      display: inline-block;
      font-size: 44px;
    }
    .miao-footer>li>p{
      font-size: 26px;
    }
    .miao-footer>.active{
        color:#74d660;
     }
    .bold{
      font-weight: bold;
    }
</style>
